<template>
	<view class="app" v-if="user">
        <load :ready="ready"></load>
        <view class="navtop">
            <u-navbar :background="{
                background:'#0093dd'
            }" :border-bottom="false" title-color="#fff" title="个人中心" :isFixed="true" :isBack="false">
            </u-navbar>
        </view>
		
		<view class="headbg"></view>
        <view class="usertop">
			<view class="ava" @click="link('/pages/user/user_info')">
				<!-- <u-image  :src="user.avatar" width="144" height="144"></u-image> -->
				<u-image  :src="user.avatar" width="110" height="110"></u-image>
			</view>
			<view class="info">
				<view class="title">
					<text>{{user.name || '游客'}}</text>
					<view class="type">
						<u-tag v-if="user.type == 2" size="mini" type="success" text="家庭用户" mode="light" />
						<u-tag v-else size="mini" text="商户" mode="light" />
					</view>
				 </view>
				 <view class="text">
				 	用户账号:{{user.mobile}}
				 </view>
			<!-- 	<view class="text">
					手机号码:{{user.mobile}}
				</view>
				<view class="text">
					{{user.address}}
				</view> -->
			</view>
			
		</view>
        
		<view class="titlebox">
			<view class="icon"></view>
			<view class="title">服务</view>
		</view>
		
		<u-cell-group>
			<u-cell-item @click="handleGoods" title="我要订气">
				<image slot="icon" class="nav-icon" src="/static/icon_box.png" mode="widthFix"></image>
			</u-cell-item>
			<!-- :value="num" -->
			<u-cell-item  @click="link('/pages/user/order_list')" title="我的订单">
				<image slot="icon" class="nav-icon" src="/static/icon_invoice.png" mode="widthFix"></image>
			</u-cell-item>
			<u-cell-item @click="link(userInfo.telephone ? '/pages/user/addres_list' : '/pages/user/addres_info')"  title="我的地址">
				<image slot="icon" class="nav-icon" src="/static/icon_add.png" mode="widthFix"></image>
			</u-cell-item>
			<u-cell-item  @click="link('/pages/user/bottle')"  title="我的押瓶">
				<image slot="icon" class="nav-icon" src="/static/icon_mq.png" mode="widthFix"></image>
			</u-cell-item>
			<u-cell-item  @click="handleTel"  title="联系客服">
				<image slot="icon" class="nav-icon" src="/static/icon_admin3.png" mode="widthFix"></image>
			</u-cell-item>
			
			
			<u-cell-item :value="isArg ? '已签署' : '未签署'"  :border-bottom="false" @click="link('/pages/user/arg_info')"  title="用气协议">
				<image slot="icon" class="nav-icon" src="/static/icon_description.png" mode="widthFix"></image>
			</u-cell-item>
			
		</u-cell-group>
		<u-gap height="30"></u-gap>
		<u-cell-group :border="false" >
			<u-cell-item  title="退出登录" @click="showExit=true" :border-bottom="false">
				<image slot="icon" class="nav-icon" src="/static/icon_arrow.png" mode="widthFix"></image>
			</u-cell-item>
		</u-cell-group>
		
		<!-- <u-modal v-model="showLogOff" @confirm="confirmLogOff" :show-cancel-button="true" content="是否确定注销账号？"></u-modal> -->
		<u-modal v-model="showExit" @confirm="confirmExit" :show-cancel-button="true" content="是否退出登录？"></u-modal>
		
		<u-modal v-model="showArg" @confirm="confirmArg" confirm-text="去签署"  :show-cancel-button="true" content="未签署用气协议"></u-modal>
		
		
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins:[mixinsBase],
	components: {
        
	},
	data() {
		return {
			showChanging: false,
            adlist: [],
			hospitalList:[],
			current:0,
			deCurrent:0,
			btnStyle: this.$config.btnStyle,
			showLogOff: false,
			showExit: false,
			info:{},
			user:{},
			num:0,
			isArg:null,
			showArg:false,
		};
	},
	onLoad() {
        that=this;
	},
	onReady(){
	},
    onShow(){
		// this.getHome();
		if(!this.userInfo){
			uni.reLaunch({
				url:'/pages/login/login'
			})
			return
		}
		// this.getInit();
		this.getUserInfo();
    },
    onUnload(){
        that=null
    },
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {
  //       return {
		// 	// path,
		// 	imageUrl:config.shareImg,
		// 	// title
		// }
	},
	methods: {
		confirmArg(){
			this.showArg=false;
			this.link('/pages/user/arg_info')
		},
		handleTel(){
			uni.makePhoneCall({
				phoneNumber:'0731-55555184'
			})
		},
		handleGoods(){
			uni.switchTab({
				url: '/pages/navbar/index'
			})
		},
		hanldeOrder(){
			this.link('/pages/user/order_list?current=1')
		},
		async getInit(){
			let res = await this.$api.orderNum({
				order_status:1
			});
			if (res.data.code == this.$config.RESOK) {
				this.num = res.data.data
			} else {
			}
		},
		async getUserInfo(){
			try{
				let res = await this.$api.getUserList();
				if(res.data.id){
					res.data = this.$user.normalFilter(res.data)
					let userInfo = {
						...this.userInfo,
						...res.data,
					}
					this.user = res.data
					this.setUserInfo(userInfo)
					this.getArgInfo();
				} else{
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
			}catch(e){
				//TODO handle the exception
				uni.removeStorageSync('userInfo')
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
			
		},
		async getArgInfo(){
			let res = await this.$api.isAgreement();
			if (res.data.code == this.$config.RESOK) {
				this.isArg = true
			} else {
				this.showArg=true;
				this.isArg = false
			}
		},
		async confirmLogOff(){
			console.log('confirmLogOff');
			uni.showLoading()
			let res = await this.$api.agencyAuthUnsubscribe();
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				this.$common.showTip(res.data.msg);
				setTimeout(()=>{
					uni.reLaunch({
						url:'/pages/login/login'
					})
				},2000)
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async confirmExit(){
			this.setUserInfo(null);
			uni.removeStorageSync('userInfo')
			this.$common.showTip('退出成功');
			setTimeout(()=>{
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},2000)
			// console.log('confirmExit');
			// uni.showLoading()
			// let res = await this.$api.logout();
			// uni.hideLoading();
			// if (res.data.code == this.$config.RESOK) {
			// 	this.setUserInfo(null);
			// 	this.$common.showTip(res.data.msg);
			// 	setTimeout(()=>{
			// 		uni.reLaunch({
			// 			url:'/pages/login/login'
			// 		})
			// 	},2000)
			// } else {
			// 	this.$message.error(res.data.msg);
			// }
		},
        selectSwiper(index){
            console.log(index)
        },
        ...mapActions(['setUserInfo']),
	},
	computed: {
		...mapState({
			userInfo: 'userInfo',
		})
	},
};
</script>

<style>
page{
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
page{
	background: #f5f5f5;
}
.app{
	padding: 0 40rpx 40rpx;
}
.headbg{
	background: $color;
	width: 100%;
	height: 200rpx;
	position: absolute;
	left: 0;
	top: 0;
}

.usertop{
	position: relative;
	background: #fff;
	border-radius: 14px;
	z-index: 99;
	margin: 0 auto;
	box-shadow: 0px 0px 11px 6px rgba(0, 0, 0, 0.05);
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
	justify-content: space-between;
	display: flex;
	align-items: center;
	.ava{
		border: 1px solid #fff;
		border-radius: 12px;
		overflow: hidden;
		background: #eee;
	}
	
	.info{
		flex: 1;
		padding-left: 20rpx;
		.title{
			font-size: 16px;
			line-height: 1.6;
			margin-bottom: 3px;
			font-weight: bold;
			display: flex;
			align-items: center;
			.type{
				margin-left: 3px;
				line-height: 1;
				padding-bottom: 2px;
			}
		}
		.text{
			color: #7E8187;
			font-size: 12px;
			display: flex;
		}
		
	}
	.desc{
		display: flex;
		align-items: center;
		margin: 30rpx 0 0;
		&-item{
			width: 33.33%;
			text-align: center;
		}
		.val{
			font-size: 16px;
			margin-bottom: 2px;
			font-weight: bold;
		}
		.name{
			font-size: 12px;
			color: #666;
		}
	}
	.line{
		width: 1px;
		height: 24px;
		background: #7E8187;
	}
	
}
.titlebox{
	display: flex;
	padding: 24rpx 0;
	align-items: center;
	.icon{
		width: 6px;
		height: 34rpx;
		background: linear-gradient(180deg, #6DA6FF 0%, #4C85DE 100%);
		border-radius: 2.5px;
		margin-right: 5px;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
	}
}
.nav-icon{
	width: 36rpx;
	margin-right: 5px;
	height: 36rpx;
}

</style>

